 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
    <link rel="stylesheet" href="../lib/font/iconfont.css">

     <link rel="stylesheet" href="../css/init.css">
     <link rel="stylesheet" href="../css/detail.css">
 </head>
 <body>
    <header> 
        <div class="center">
         <ul>
             <li>首页</li>
             <li>华为官网</li>
             <li>华为俱乐部</li>
             <li>v码(优码购)</li>
             <li>企业购</li>
             <li>Select Region</li>
             <li>更多精彩</li>
         </ul>
 
         <ul class="headerTow">
            <li class="iflogin"><a href="./login.html">登录</a></li>
           
            <li><a href="./register.html">请注册</a></li>
             <li>华为俱乐部</li>
             <li>v码(优码购)</li>
             <li>企业购</li>
          
             <li style="color: white;" class="exit">退出登录</li>
         </ul>
 
         <div class="headerToCart">
             <i class="iconfont icon-gouwuche2"></i>
             <a href="./cart.html">购物车(0)</a>
         </div>
        </div>
     </header>
 
 
     <nav>
       <div class="center">
         <img src="https://res.vmallres.com/portal/1.11.4.300/h5/images/logo_app.png" alt="">
         <p class="navP">
             <a href="./index.html">华为专区</a>
             <a href="javascript:;">鸿蒙之恋</a>
             <a href="javascript:;">莫塞尔</a>
             <a href="javascript:;">华为优选</a>
             <a href="javascript:;">教育购</a>
             <a href="javascript:;">HarmonyOS</a>
             <a href="javascript:;">特惠企采</a>
         </p>
         
         <div class="sear">
            <input type="search" class="search">
            <div class="svg"><i class="iconfont icon-fangdajing"></i></div>
            
        </div>
     </nav>

     <div class="product">
        <div class="g">
            <a href="./index.html">首页</a>
            &nbsp;>&nbsp;
            <span>【订金】HUAWEI P50  8GB+256GB（可可茶金）</span>
        </div>
        <div class="left">
            <div class="show">
                <div class="mask"></div>
                <div class="img"></div>
            </div>
            <div class="fanda">
                <img src='' class='fandaimg'>
            </div>
            <div class="small">
               <a href="" class="above"></a>
               <div class="s_show">
                 
                   <ul>
                  
                   </ul>
                  
               </div>
               <a href="" class="next"></a>
            </div>
        </div>
        <div class="right">
            <h1>【订金】HUAWEI P50  8GB+256GB（可可茶金）</h1>
            <div class="product-slogan">【抢先预订 价保618 到手价4188元起】①预订立省300元 ②赠199元66W超级快充套装</div>
           <div class="product-info">
               <label>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</label>
               <div class="product-price">
                   <div class="pro-price">
                       <em>$</em>
                       <span>4988.00</span>
                   </div>
                   <div class="pro-price-deposit">
                       <span>定金</span>
                       <span>￥&nbsp;100.00</span>
                   </div>
                   <div class="pro-price-deposit">
                       <span>可抵</span>
                       <span>￥&nbsp;400.00</span>
                   </div>
               </div>
               <div class="product-info-list">
                   <label>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</label>
                    <div class="product-prom">
                        <div class="product-promone">
                            <em>赠品</em>
                            <a href="#">去选择&nbsp;></a>
                        </div>
                        <div class="product-promone">
                           <em>赠送积分</em>
                           <a href="#" style="color: black;">购买即赠商城积分，积分可抵现~</a>
                       </div>
                    </div>
               </div>
           </div>
          <div class="hr-5"></div>
          <div class="line"></div>
           <div class="hr-16"></div>
          <div class="hr-5"></div>
           <div class="product-pulldown">
               <label for="">服务说明</label>
               <span>已满48元包邮</span>
               <span>由华为终端提供商品、发货开票及售后服务</span>
               <a href="#">查看详情</a>
           </div>
           <div class="product-pulldown">
               <label for="">商品编码</label>
               <span>2601010308401</span>
           </div>
           <div class="hr-5"></div>
          <div class="line"></div>
          <div class="hr-16"></div>
          <div class="pro-skus">
         
              <div class="roduct-choose">
               <label for="">选择颜色</label>
                  <ul>
                      <li>
                          <img src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202205/gbom/6941487235780/40_40_13F0DCAEF75D98517492F714F0B9A177mp.png" alt="">
                     <span>可可茶金</span>
                       </li>
                       <li>
                           <img src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202205/gbom/6941487235780/40_40_13F0DCAEF75D98517492F714F0B9A177mp.png" alt="">
                      <span>可可茶金</span>
                        </li> <li>
                           <img src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202205/gbom/6941487235780/40_40_13F0DCAEF75D98517492F714F0B9A177mp.png" alt="">
                      <span>可可茶金</span>
                        </li>
                  </ul>
              </div>
              <div class="roduct-choose">
               <label for="">选择套餐</label>
                  <ul class="wu">
                  <li>
                      <span>官方标配（无充电套装及耳机）</span>
                        </li>
                  </ul>
              </div>
              <div class="roduct-choose">
               <label for="">选择版本</label>
                  <ul class="wu">
                   
                       <li>
                         
                      <span>4G全网通 8GB+256GB</span>
                        </li> 
                        <li>
                         
                      <span>4G全网通 8GB+128GB</span>
                        </li>
                  </ul>
              </div>

              <div class="product-description">
                  <label for="">已选择商品</label>
                  <span>可可茶金 / 4G全网通 8GB+256GB / 官方标配（无充电套装及耳机） </span>
              </div>

              <div class="clearfix">
                  <div class="num">
                      <input type="text" value="1">
                      <p>
                          <a href="" class="plus">+</a>
                          <a href="" class="minus">-</a>
                      </p>
                  </div>
                  <div class="butt">加入购物车</biv>
                    
              </div>
              <div class="gocart">查看购物车</biv>   
          </div>
         
          <div class="illu">
              <h2>购买流程</h2>
              <ul>
                  <li>1.&nbsp;&nbsp;&nbsp;支付订金<span>2022.05.23 20:00 ~ 2022.05.31 19:59</span></li>
             <li>2.&nbsp;&nbsp;&nbsp;支付订金<span>(2022.05.31 20:00 ~ 2022.06.01 23:59)</span></li>
             <li>3.&nbsp;&nbsp;&nbsp;支付订金<span>(2022.05.31 20:00 ~ 2022.06.01 23:59)</span></li>
               </ul>
          </div>
           </div>
    </div>
</div>
     <div class="hr_20"></div>

</div>




     <div class="main">
        <div class="mainNav">
            <p>
                <a href="" class="chea">
                    商品详情
                </a>
                <a href="">规格参数</a>
                <a href="">包装与售后</a>
                <a href="">用户评价（6330+）</a>
            </p>
        </div>
        <div class="pics">
            <img src="https://res.vmallres.com//uomcdn/CN/pms/202205/71109921EF2E640B40C8D57F9864910F.png" alt="">
        <img src="	https://res.vmallres.com//uomcdn/CN/pms/202205/7C7A2E447DBF6893144A22B935FBEAC1.jpg" alt="">
        <img src="https://res.vmallres.com//uomcdn/CN/pms/202205/8837DE9156820DF65DD15789A683B1A7.jpg" alt="">
        <img src="https://res.vmallres.com//uomcdn/CN/pms/202205/8D9F02CCCDEDA644F26AF90A7DD6E38C.jpg" alt="">
        </div>
    </div>


    <script src="../lib/js/axios.min.js"></script>
    <script src="../js/detail.js"></script>
 </body>
 </html>